<template>
  <div>
    <el-form inline>
      <el-form-item label="一级分类" size="small">
        <el-select :value="category1Id" placeholder="请选择" @change="handleCategory1">
          <el-option v-for="c1 in category1List" :key="c1.id" :label="c1.name" :value="c1.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" size="small">
        <el-select :value="category2Id" placeholder="请选择" @change="handleCategory2">
          <el-option v-for="c1 in category2List" :key="c1.id" :label="c1.name" :value="c1.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类" size="small">
        <el-select :value="category3Id" placeholder="请选择" @change="handleCategory3">
          <el-option v-for="c1 in category3List" :key="c1.id" :label="c1.name" :value="c1.id" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'CategorySelect',
  data() {
    return {

    }
  },
  computed: {
    ...mapState('category', ['category1List', 'category2List', 'category3List']),
    ...mapGetters('category', ['category1Id', 'category2Id', 'category3Id'])

  },
  watch: {
  },
  mounted() {
    this.getCategory1List()
  },
  methods: {
    getCategory1List() {
      this.$store.dispatch('category/getCategory1List')
    },
    handleCategory1(category1Id) {
      this.$store.dispatch('category/getCategory2List', category1Id)
    },
    handleCategory2(category2Id) {
      this.$store.dispatch('category/getCategory3List', category2Id)
    },
    handleCategory3(category3Id) {
      this.$store.commit('category/UPDATE_CATEGORY3ID', category3Id)
    },
    sendCategory() {
      this.$bus.$emit('give', this.category3Id)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
